<template>
  <view class="category">
    <!-- 搜索 -->
    <view class="search">
      <u-search
        bg-color="#fff"
        :show-action="false"
        v-model="keyword"
        @click="onSearch"
      ></u-search>
    </view>
    <view class="content">
      <van-tree-select
        style="height: 100vh"
        v-model:active-id="activeId"
        v-model:main-active-index="activeIndex"
        :items="categories"
      >
        <template #content>
          <view v-if="categories[activeIndex]">
            <!-- 标题
            <view class="title">{{ categories[activeIndex].text }}</view> -->
            <!-- 分类列表 -->
            <view class="categoryBox">
              <view
                @click="goGoosList(item)"
                class="categoryItem"
                v-for="(item, index) in categories[activeIndex].children"
                :key="item.text + index"
              >
                <!-- 图片 -->
                <view>
                  <van-image
                    width="60"
                    height="60"
                    :src="getImgFullPath(item.icon)"
                  />
                </view>
                <!-- 名称 -->
                <view style="margin-top: 20rpx">{{ item.text }}</view>
              </view>
            </view>
          </view>
        </template>
      </van-tree-select>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { onLoad, onShow, onReady } from '@dcloudio/uni-app'
// api
import { baseApi, productApi, moneyApi } from '@/api'
// 图片
import { getImgFullPath } from '@/utils'

// 初始数据
const activeId = ref(1)
const activeIndex = ref(0)
const keyword = ref('')
// 分类数据
const categories = ref([])
const shopMode = ref()
//#region ************ 搜索 ********************** */
const onSearch = () => {
  uni.navigateTo({
    url: `/packageG/pages/goods/index?search=1&mode=${shopMode.value}`
  })
}

//#endregion

// #region ************ 获取分类列表 ********************** */

const getCategoryList = async () => {
  const { data } = await baseApi.getCategoryList({
    detail: true,
    id: 9500024
  })

  // 使用转换函数
  categories.value = data.records[0].items.map((item) => ({
    text: item.name,
    children: item.items
      ? item.items.map((childItem) => ({
          id: childItem.id,
          text: childItem.name,
          icon: childItem.icon,
          children: childItem.items || []
        }))
      : []
  }))
}

//#endregion

// #region ********************* 商品列表 ********************** */
// 商品列表
const goGoosList = (item) => {
  uni.navigateTo({
    url: `/packageG/pages/goods/index?categoryId=${item.id}&name=${item.text}&mode=${shopMode.value}`
  })
}

//#endregion

onLoad((options) => {
  console.log('分类', options)
  shopMode.value = options?.mode
  getCategoryList()
})
</script>

<style lang="scss" scoped>
.category {
  margin-left: -20rpx;
  margin-right: -20rpx;
  .search {
    margin: 20rpx;
  }
}
.content {
  width: 100%;
  margin: 0 20rpx;
  // display: flex;
  // height: calc(100vh - 44px); /* 减去导航栏高度 */
  .title {
    margin: 20rpx;
    font-weight: 700;
    color: #333;
  }
  .categoryBox {
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    // justify-content: start;
    justify-content: space-between;
    align-items: center;
  }
  .categoryItem {
    // width: 20%;
    text-align: center;
    margin: 20rpx;
  }
}

:deep(.van-tree-select__nav) {
  // flex: 0;
}
:deep(.van-tree-select__content) {
  flex: 3.5;
}

:deep(.van-sidebar-item--select:before) {
  background-color: #ff6c18;
}
:deep(.van-sidebar-item__text) {
  font-size: 28rpx;
}
</style>
